<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="d1">
    <p>{{msg}}</p>
    <!--
        对Vue仓库中的数据进行二次处理
        将msg的值根据空格颠倒过来
        Hello Vue -- Vue Hello
    -->
    <!-- 该方式存在多次逻辑处理,可读性较低 -->
    <p>{{ msg.split(' ').reverse().join(' ') }}</p>
    <!-- 将逻辑处理封装起来 -->
    <p>{{reverseMsg}}</p>
    <button @click="msg='Welcome to Vue'">修改msg值</button><br/>
    <p>{{num}}</p>
    <p>{{doubleNum}}</p>
    <!--
        此时直接使用会报错
        修改时只能对仓库中原始的数据进行修改
        如果要对操作后的数据进行修改
        则需要提供对应的set方法
    -->
    <button @click="doubleNum=10">修改num的值</button>
</div>
<script>
    new Vue({
        el:"#d1",
        data:{
            msg:"Hello Vue",
            num: 3
        },
        computed:{
            reverseMsg:function(){
                return this.msg.split(' ').reverse().join(' ');
            },
            // 默认是get方法
            // doubleNum:function(){
            //     return this.num * 2;
            // }
            doubleNum:{
                get:function(){
                    return this.num * 2;
                },
                set:function(value){
                    // 由于doubleNum依赖于num
                    // 在仓库中只有num
                    // 因此,此处只能为num赋值,而不能对doubleNum赋值
                    // 在赋值的时候给定的值只能是num
                    // 例如:在View中定义了doubleNum=10
                    // 实际上是为num赋值为10
                    // 真实的doubleNum会经过computed处理,此处即为20
                    this.num = value;
                }
            }
        }
    });
</script>
</body>
</html>